﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit">
    <!-- 禁止百度SiteAPP转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>HzyUI</title>
    <link href="../../lib/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
    <link href="../../css/normalize.css" rel="stylesheet" />
    <link href="../../css/site.css" rel="stylesheet" />
    <!-- 图标 CSS-->
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/web-icons/web-icons.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/themify/themify.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/7-stroke/7-stroke.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/glyphicons/glyphicons.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/ionicons/ionicons.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/material-design/material-design.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/mfglabs/mfglabs.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/open-iconic/open-iconic.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/themify/themify.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/weather-icons/weather-icons.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/fonts/octicons/octicons.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/1.1.0/css/examples/components/basic/icons.css">

</head>
<body>
    <div class="page animation-fade">
        <div class="page-content">
            <div class="padding-vertical-15">
                <div class="text-center">
                    <h3>浏览 11 个图标集</h3>
                    <p class="title-desc">
                        Web icons / Font awesome / 7-Stroke / Glyphicons / Ion Icons / Material Design /
                        Mfglabs / Open Iconic / Themify / Weather icons / Octicons
                    </p>
                </div>
            </div>

            <div class="panel">
                <div class="panel-body container-fluid">
                    <div class="row row-lg">
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">web-icons</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 margin-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-dashboard" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-inbox" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-cloud" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-bell" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-book" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-bookmark" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-tag" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-library" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-share" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-reply" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-refresh" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-move" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-chat" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-envelope" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-user" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-menu" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-layout" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-fullscreen" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="web-icon.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">font-awesome</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 margin-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-glass" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-music" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-search" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-envelope-o" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-heart" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-star" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-user" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-film" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-check" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-remove" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-signal" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-gear" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-home" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-road" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-download" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-inbox" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-refresh" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-lock" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="font-awesome.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">7-stroke</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 margin-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-cash" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-close" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-bluetooth" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-way" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-wristwatch" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-id" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-volume" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-users" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-switch" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-scissors" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-wallet" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-safe" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-video" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-upload" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-umbrella" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-tools" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-trash" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-unlock" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="/components/basic/icons/7-stroke">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">glyphicons</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 margin-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-tags" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-italic" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-bold" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-font" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-glass" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-envelope" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-music" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-search" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-heart" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-star" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-user" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-remove" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-home" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-road" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-time" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-upload" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-inbox" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-lock" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="/components/basic/icons/glyphicons">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">ionicons</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 margin-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-alert" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-fireball" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-eye" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-eject" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-egg" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-drag" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-document" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-disc" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-cube" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-chatboxes" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-checkmark" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-clipboard" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-clock" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-close" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-cloud" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-coffee" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-compass" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-contrast" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="/components/basic/icons/ionicons">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">material-design</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 margin-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-3d-rotation" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-album" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-archive" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment-account" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment-alert" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment-check" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment-o" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment-return" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment-returned" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-attachment-alt" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-attachment" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-audio" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-badge-check" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-balance-wallet" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-balance" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-battery-alert" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-bike" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="/components/basic/icons/material-design">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">mfglabs</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 margin-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-cloud" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-arrow_up" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-arrow_down" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-arrow_right" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-arrow_left" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-reorder" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-list" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-reorder_square" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-reorder_square_line" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-coverflow" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-coverflow_line" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-pause" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-play" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-step_forward" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-step_backward" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-data_science" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-globe" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-paperplane_ico" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="/components/basic/icons/mfglabs">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">open-iconic</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 margin-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-align-center" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-align-left" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-align-right" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-aperture" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-audio" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-badge" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-ban" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-basket" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-beaker" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-bell" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-bluetooth" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-bold" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-bolt" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-book" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-bookmark" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-box" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-briefcase" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-browser" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="/components/basic/icons/open-iconic">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">themify</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 margin-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-wand" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-volume" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-user" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-unlock" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-unlink" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-trash" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-thought" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-target" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-tablet" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-star" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-spray" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-signal" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-settings" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-search" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-cut" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-bookmark" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-reload" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-pin" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="/components/basic/icons/themify">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">weather-icons</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 margin-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-cloudy" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-fog" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-hail" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-lightning" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-rain" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-showers" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-snow" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-sprinkle" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-thunderstorm" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-windy" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-cloud" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-degrees" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-fahrenheit" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-horizon" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-lightning" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-sprinkles" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-sunrise" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-sunset" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="/components/basic/icons/weather-icons">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">octicons</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 margin-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-book" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-bookmark" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-clippy" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-dashboard" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-database" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-file-code" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-file-zip" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-git-branch" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-keyboard" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-mark-github" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-organization" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-repo" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-server" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-settings" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-terminal" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-shield" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-versions" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-watch" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="/components/basic/icons/octicons">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../lib/jquery/jquery-2.1.4.min.js"></script>
    <script src="../../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>


</body>
</html>
